<template>
  <div class="nav">
    <div class="logo">
      <img src="../../../public/logo.png" alt="">
    </div>
    <ul>
      <router-link to="/home" tag="li">HOME</router-link>
      <router-link to="/article" tag="li">ARTICLE</router-link>
      <router-link to="/source" tag="li">SOURCE</router-link>
      <router-link to="/production" tag="li">PRODUCTION</router-link>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "index"
  }
</script>

<style lang="less" scoped>
  .nav {
    width: 20%;
    background: #01011c;
    height: 100vh;
    color: white;
    .logo{
      width: 100px;
      height: 100px;
      background: white;
      margin: 20px auto;
      img{
        width: 100%;
        height: 100%;
      }
    }
    ul {
      li {
        height: 50px;
        line-height: 50px;
      }
      .router-link-active {
        background: red;
      }
    }
  }
</style>